<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF-8"%>
<%@ page language="java" import="com.server.web.JsVersionUtil"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>${platformName}</title>
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href='<c:url value="/share/bootstrap.css"></c:url>' />
	<link rel="stylesheet" href='<c:url value="/share/AllStyle.css"></c:url>'/>
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src='<c:url value="/js/jquery.min.js"></c:url>' ></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src='<c:url value="/js/bootstrap.js"></c:url>'></script>
	<script src='<c:url value="/js/all.js"></c:url>'></script>
	<style type="text/css">
		html,body {
			height: 100%;
			background:url('<c:url value='/share/images/backgroundImg.jpg'></c:url>');backgroud-repeat:repeat;
		}
		.box {
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699FF', endColorstr='#6699FF'); /*  IE */
			background-image:linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image:-o-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image:-moz-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image:-webkit-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image:-ms-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			
			margin: 0 auto;
			position: relative;
			width: 100%;
			height: 100%;
		}
		.login-box {       /* 7.29 王紫葳*/ 
			width: 100%;
			max-width:500px;  
			height: 620px;
			position: absolute;
			margin-top: 270px;
			margin-left: calc(50% - 250px);
			box-shadow: 0 0 5px gray;
			padding: 0px 50px;
			background: #fff;
		}
		.login{
		    width: 100%;
		    background-color: #3162B2;
		    font: 19px "微软雅黑";
		    color: #fff;
		    margin-top: 15px;
		    height: 42px;
		}
		
/*@media screen and (min-width:500px){    */ /* 7.28  已舍弃 王紫葳*/ 
			/*.login-box {*/
				/*left: 50%;*/
				/*设置负值，为要定位子盒子的一半宽度*/
				/*margin-left: -250px;*/
			/*}*/
		/*}	*/
		.home_header_right_login>a:nth-child(2) {
			background-color: #1e519f;
			color: #fff;
		}	


		.form {
			width: 100%;
			max-width:500px;
			height: 275px;
			margin: 0px auto 0px auto;
			padding-top: 25px;
		}	
		.login-content {
			width: 100%;
			max-width:500px;
			float: left;
		}		
			
		/*	
		.input-group {
			margin: 0px 0px 18px 0px !important;
		}*/
		.form-control,
		.input-group {
			height: 38px;
		}

		.form-group {
			margin-bottom: 0px !important;
		}
		.login-title {
			margin-top: 20px;
			padding-bottom: 20px;
			font-size:18px;
			cursor: pointer;
			height: 50px;
			line-height: 50px;
		}
		.register{
			width: 100%;
			background-color: #1e519f;
			font:19px "微软雅黑";
			color: #fff;
			margin-top: 15px;
			height: 42px;
		}
		.register_panel{
			color: #000;
			border-bottom: 3px solid #295c96;
		}


		.link p {
			line-height: 15px;
		}
		.btn-sm {
			padding: 8px 24px !important;
			font-size: 16px !important;
		}

		.input-group-addon{
			color: #98c0ed;
			background-color: rgba(0,0,0,0);
		}
		.validate{
			width: 25%;
			height: 40px;
			border:1px solid #295c96;
			float: right;
		}
		input:-webkit-autofill {
			-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
		}
    	.col-xs-12{
			height:42px;
			margin-top:15px;
			margin-bottom:13px;
		}
		.col-xs-12>span{
			font-size:12px;
			display:inline-block !important;
			margin:4px 0px;
			padding-left:5px;
		}
		.btn-info {
    		border:0px;
    	}
	</style>
</head>
<body>
	<!-- 登陆 注册 按钮 王紫薇7.28 -->
	<div class="home_header_right_login">
		<a href="<c:url value='/login'/>">登录</a>
		<a href="<c:url value='/login/register'/>">注册</a>
		<a href="<c:url value='/'/>">首页</a>
	</div>

	<div class="header_title">
		<div class="bookImg"></div>
		<div class="website_title">
			${platformName}
		</div>
	</div>
	<div class="home_header_2">
		<div class="login-box">
			<div class="login-title text-center register_panel">
				注册
			</div>
			<div class="login-content ">
			<div class="form">
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
							<input type="tel" id="nickname" name="nickname" class="form-control" placeholder="昵称   由字母、数字、下划线组成">
						</div>
						<span id="tishi1"></span>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>
							<input type="tel" id="telephone" name="telephone" class="form-control" placeholder="手机号">
						</div>
						<span id="tishi2"></span>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
							<input type="text" id="verifyCode" name="verifyCode" class="form-control" placeholder="输入验证码" style="width: 69%;height: 42px;">
							<img class="validate" alt="" id="getImg" onclick="changeImg()" src='<c:url value="/code/getCode"></c:url>' style="width:30%;height:42px">
						</div>
						<span id="tishi6"></span>
					</div>
				</div>
				
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
							<input type="text" id="code" name="code" class="form-control" placeholder="请验证后获取手机验证码" style="width: 68%;height: 42px;">
							<button id="getCodeButton" class="getCode btn" style="color: #fff;background-color: #82bcff;height:42px;text-align: center;width:100px" disabled="disabled">获取验证码 </button>
						</div>
						<span id="tishi3"></span>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
							<input type="password" id="password" name="password" class="form-control" placeholder="密码   由6到20位字母、数字组成">
						</div>
						<span id="tishi4"></span>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
							<input type="password" id="spassword" name="spassword" class="form-control" placeholder="再次输入密码">
						</div>
						<span id="tishi5"></span>
					</div>
				</div>
				<div class="form-group form-actions">
					<div class="col-xs-12" style="padding-bottom: 30px;">
						<button class="btn btn-sm btn-info login" id="add" style="background: #3162b2;padding: 8px 40px !important;border:0px;"> 注册</button>
					</div>
					<div class="modal fade bs-example-modal-lg" id="suc" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
						<div class="modal-dialog modal-lg">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
								    <h4 class="modal-title" id="myLargeModalLabel">成功</h4>
								 </div>
								 <div class="modal-body">
								     	注册成功！
								 </div>
								 <div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								</div>
							 </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
	<script type="text/javascript">
		var nickName = /^[a-zA-Z0-9_]{6,10}$/;
		var phoneTest = /^1[3,4,5,7,8]\d{9}$/;
		var pwsdTest = /^[a-zA-Z0-9]{6,20}$/;
		function check_nick(){
			if(!nickName.test($("input[name='nickname']").val())){
				$("#tishi1").html("<font color='red';font-size:12px;>*昵称 由6-12位字母、数字、下划线组成</font>");
				return false;
			}else{
				$("#tishi1").html("");
				return true;
			}
		}
		function check_phone(){
			if(!phoneTest.test($("input[name='telephone']").val())){
				$("#tishi2").html("<font color='red'>*请输入正确的手机号</font>");
				return false;
			}
			$("#tishi2").html("");
			return true;
		}
		function check_form(){
			if($("input[name='code']").val()=='' || $("input[name='code']").val()==null){
				$("#tishi3").html("<font color='red'>*请输入手机验证码!</font>");
				return false;
			}else{
				$("#tishi3").html("");
			}
			if(!pwsdTest.test($("input[name='password']").val())){
				$("#tishi4").html("<font color='red';>*密码由6到20数字、字母组成!</font>");
				return false;
			}else{
				$("#tishi4").html("");
			}
			if($("input[name='spassword']").val()=='' || $("input[name='spassword']").val()==null){
				$("#tishi5").html("<font color='red'>*再次输入验证码不能为空!</font>");
				return false;
			}else{
				$("#tishi5").html("");
			}
			if($("input[name='spassword']").val() != $("input[name='password']").val()){
				$("#tishi5").html("<font color='red'>*两次输入的密码不相同!</font>");
				return false;
			}else{
				$("#tishi5").html("");
			}
			if($("input[name='verifyCode']").val()=='' || $("input[name='verifyCode']").val()==null){
				$("#tishi6").html("<font color='red'>*请输入验证码!</font>");
				return false;
			}else{
				$("#tishi6").html("");
			}

			return true;
		}
		function getCode(){
			var telephone = $("input[name='telephone']").val();
			$.ajax({
				url:"<c:url value='/login/sendCode/"+telephone+"'></c:url>",
				type:"post",
				dataType:"json",
				data:{
					//"telephone":$("input[name='telephone']").val()
				},
				success:function(json){
					if(json.isSuccess){
						//alert(json.info);
					}else{
						alert(json.info);
					}
				}
			});
		}
		function add(){
			if(check_form()){
				$.ajax({
					url:"<c:url value='/login/add'></c:url>",
					type:"post",
					dataType:"json",
					data:{
						"telephone":$("input[name='telephone']").val(),
						"nickname":$("input[name='nickname']").val(),
						"password":$("input[name='password']").val(),
						"spassword":$("input[name='spassword']").val(),
						"code":$("input[name='code']").val(),
						"verifyCode":$("input[name='verifyCode']").val(),
					},
					success:function(json){
						if(json.isSuccess){
							$("#suc").modal('show');
							location.href="<c:url value='/'></c:url>";
						}else{
							if(json.info=="请输入正确的验证码!"){
								$("#tishi6").html("<font color='red'>*输入验证码不正确!</font>");
							}
							if(json.info=="手机验证码输入不正确！"){
								$("#tishi3").html("<font color='red'>*手机验证码输入不正确!</font>");
							}
						}
					}
				});
				
			}
		}
		function changeImg() {
		    var imgSrc = $("#getImg");
		    var src = imgSrc.attr("src");
		    imgSrc.attr("src", chgUrl(src));
		}
		  //时间戳   
		  //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳   
		function chgUrl(url) {
			var timestamp = (new Date()).valueOf();
		 	url = url.substring(0, url.length);
		    if ((url.indexOf("&") >= 0)) {
		    	url = url + "×tamp=" + timestamp;
			} else {
		   		url = url + "?timestamp=" + timestamp;
		    }
		    return url;
		}
		function checkCode(){
			var inCode = $("input[name='verifyCode']").val();
			$.ajax({
				url:"<c:url value='/login/checkCode'></c:url>",
				type:"post",
				dataType:"json",
				data:{
					"verifyCode":$("input[name='verifyCode']").val(),
				},
				success:function(json){
					if(json.isSuccess){//验证码正确
						$("#tishi6").html("");
						$('#getCodeButton').attr("disabled",false);
						$('#code').attr("placeholder","请输入手机验证码");
					}else{//验证码错误
						if(json.info=="请输入正确的验证码!"){
							$("#tishi6").html("<font color='red'>*输入验证码不正确!</font>");
						}
					}
				}
			});
		}
		$(function(){
			//$("input[name='nickname']").focus();
			$("input[name='nickname']").blur(function(){
				check_nick();
			});
			$("input[name='verifyCode']").blur(function(){
				checkCode();
			});
			$("input[name='telephone']").blur(function(){
				if(check_phone()){
					$.ajax({
						url:"<c:url value='/login/checkPhone'></c:url>",
						type:"post",
						dataType:"json",
						data:{
							"telephone":$("input[name='telephone']").val(),
							"nickname":$("input[name='nickname']").val()
						},
						success:function(json){
							if(json.isSuccess){
								//alert(json.info);
								
							}else{
								if(json.info=="手机号已注册！"){
									$("#tishi2").html("<font color='red'>*手机号已注册！</font>");
								}
								if(json.info =="昵称已注册！"){
									$("#tishi1").html("<font color='red'>*昵称 已注册！</font>");
								}else{
									$("#tishi2").html("<font color='red'>*手机号已注册！</font>");
								}
							}
						}
					});
				}
			});
			var validCode=true;
			$(".getCode").click(function(){
				if(check_phone()){
					getCode();
				}else{
					return;
				}
				var time=60;
				var code=$(this);
				if (validCode) {
					validCode=false;
					code.removeClass("getCode");
					code.attr("disabled",true);
					var t = setInterval(function  () {
						time--;
						code.html(time+"秒");
						if (time==0) {
							clearInterval(t);
							code.html("重发");
							validCode=true;
							code.addClass('getCode');
							code.attr("disabled",false);
						}
					},1000);
				}
			});
			
			$("#add").click(function(){
				if(check_form()){
					add();
				}
			});
			$(document).keydown(function(event){ 
				if(event.keyCode == 13){ //绑定回车 
					add();
				} 
			}); 
			
		});
		
	</script>
</body>
</html>